<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>呼呼呼</title>
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
            display: flex;
            flex-direction: column;
            height: 100%;
            position: absolute;
            width: 100%;
            background-color: rgb(172, 214, 241);
        }

        #top {
            line-height: 56px;
            flex: 1;
            border: 1px solid red;
            display: flex;
            align-items: stretch;
            justify-content: space-between;
        }

        #top:hover{
            background-color: rgb(255, 255, 255);
        }

        .h {
            flex: 1;
            float: left;
            font-size: 40px;
            width: 90px;
        }

        .h .icon {
            margin: 4px;
            display: block;
            /* 设置行内元素为块状元素才能设置宽高 */
            width: 84px;
            height: 47px;
            background-image: url(https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/index_yc/logo-white-2.png);
        }

        #top:hover .h .icon {
            display: block;
            /* 设置行内元素为块状元素才能设置宽高 */
            width: 84px;
            height: 17px;
            margin-top: 25px;
            background-image: url(https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/index_yc/logo-black.png);
            transition: all .3s linear;
            /* 图片缩放 */
            background-size: contain;
        }

        .page-nav {
            flex: 1;
            font-size: 20px;
            display: flex;
        }

        .page-nav .item {
            width: 100px;
            text-align: center;
            color: rgb(98, 99, 102);
        }

        .page-nav .item:hover{
            /* width: 100px;
            text-align: center; */
            color: rgb(2, 2, 2);
        }


        .dropdown {
            /* 相对定位 */
            position: relative;
        }

        .dropdown-content {
            /* 驱去掉样式不显示 */
            display: none;
            /* 绝对定位 */
            position: absolute;
            background-color: #f9f9f9;
            /* 添加盒子阴影 */
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            left: -100%;
        }

        .dropdown-content .content {
            display: flex;
            width: 360px;
            /* 横向排布 */
            flex-wrap: wrap;
            /* 从头开始一排一排 */
            align-content: flex-start;
            margin: 12px;
        }

        .dropdown-content .content div {
            width: 100px;
            height: 100px;
            /* 设置文字高度 不然文字不会在dev内部 */
            line-height: 20px;
            margin: 10px;
        }

        .dropdown:hover .dropdown-content {
            display: block;
            transition: all .3s linear;
        }

        .sign-btns {
            font-size: 20px;
            width: 800px;
            display: flex;
            justify-content: flex-end;
            margin: auto;
        }

        .sign-btns button {
            height: 40px;
            text-align: center;
            margin: 4px;
            width: 80px;
            border-radius: 10px;
        }



        #content {
            flex: 9;
        }
    </style>
</head>

<body>
    <div id="top">
        <div class="h">
            <div class="icon"></div>
        </div>
        <div class="page-nav">
            <div class="item" style="width:60px">首页</div>
            <div class="item dropdown">
                广告资源
                <div class="dropdown-content">
                    <div class="content">
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo01.png">
                            <span>微信</span>
                        </div>
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo02.png">
                            <span>微信</span>
                        </div>
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo03.png">
                            <span>微信</span>
                        </div>
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo04.png">
                            <span>微信</span>
                        </div>
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo05.png">
                            <span>微信</span>
                        </div>
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo06.png">
                            <span>微信</span>
                        </div>
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo07.png">
                            <span>微信</span>
                        </div>
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo08.png">
                            <span>微信</span>
                        </div>
                        <div>
                            <img src="https://e.gtimg.cn/portal/qzone/biz/gdt/portal/styles/images/add/icon-logo09.png">
                            <span>微信</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">广告技术</div>
            <div class="item">成功案例</div>
            <div class="item">营销洞察</div>
            <div class="item">最新资讯</div>
            <div class="item">帮助中心</div>
            <div class="item">营销学堂</div>
            <div class="item">流量变现</div>
        </div>
        <div class="sign-btns">
            <button class="loginBtn">登录</button>
            <button class="regBtn">注册</button>
        </div>
    </div>
    <div id="content"></div>
</body>

</html>